<template>
  <div>
    <div class="upload-box" style="min-height:600px">
      <el-form label-width="120px">
        <el-form-item label="logo">
          <logo-img
            ref="logoImg"
            @onSuccess="onSuccess"
            src='' />
        </el-form-item>
        <el-form-item label="国家">
          <el-cascader
            style="width:300px"
            v-model="area"
            :options="areaList"
            :filterable="true"
            :clearable="true" />
        </el-form-item>
        <el-form-item label="CV行业分类">
          <el-cascader
            style="width:300px"
            v-model="cvIndustryValue"
            :options="cvIndustryListCascader"
            :filterable="true"
            :clearable="true" />
        </el-form-item>
        <el-form-item label="国标分类">
          <el-cascader
            @change="csIndustryChange"
            style="width:300px"
            v-model="detail.csIndustryValue"
            :options="csIndustryListCascader"
            :filterable="true"
            :clearable="true" />
        </el-form-item>
        <el-form-item label="证监会分类">
          <el-cascader
            style="width:300px"
            v-model="detail.sfcIndustryValue"
            :options="sfcIndustryListCascader"
            :filterable="true"
            :clearable="true" />
        </el-form-item>
        <el-form-item label="申银万国">
          <el-cascader
            style="width:300px"
            v-model="detail.snIndustryValue"
            :options="snIndustryListCascader"
            :filterable="true"
            :clearable="true" />
        </el-form-item>
        <el-form-item label="地区">{{232 | getNameById("area")}}</el-form-item>
        <el-form-item label="轮次">{{1 | getNameById("roundList")}}</el-form-item>
        <el-form-item label="时间">{{140000000000 | cmsMoment}}</el-form-item>
        <detail-state-btn 
          @setState="setState"
          :infoStatus="infoStatus"
        />
        <upload title="文件上传" @onSuccess="onSuccessMultiple" />
        <el-button @click="submit">提交</el-button>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import PersonService from '../../service/subject/person';
import { PersonDto, SysUserDto } from '../../api/Interface';
import { StateMessage } from '../../service/common/interface';
import { getCascaderData, setFullValue, getIndustryById } from '../../libs/utils';
import LogoImg from '../../components/logo/index.vue';
import DetailStateBtn from '../../components/detail-state-btn/index.vue';
import { EventIpoDto } from '../../service/common/interface';
import Upload from '../../components/upload/index.vue';
@Component({
  components: {
    'logo-img': LogoImg,
    'detail-state-btn': DetailStateBtn,
    'upload': Upload
  }
})
export default class HomeIndex extends Vue {
  // 初始化数据 相当于data
  public person: PersonDto = {} as PersonDto; // <PersonVo> {}
  public eventIpo: EventIpoDto = {} as EventIpoDto;
  public user: SysUserDto = {sysUser: {}} as SysUserDto;
  // 国家
  public areaList = getCascaderData({data: this.$store.state.user.dictionary.dicAreaList, name: 'cnName', key: 'id'});
  public area: string[] = [];
  // cv行业
  public cvIndustryList = this.$store.state.user.dictionary.cvIndustryList;
  public cvIndustryListCascader = getCascaderData( {data: this.cvIndustryList} );
  public cvIndustryValue: string[] = [];
  // 国标
  public csIndustryList = this.$store.state.user.dictionary.csIndustryList;
  public csIndustryListCascader = getCascaderData( {data: this.csIndustryList} );
  public csIndustryValue: string[] = [];
  // 证监会
  public sfcIndustryList = this.$store.state.user.dictionary.sfcIndustryList;
  public sfcIndustryListCascader = getCascaderData( {data: this.sfcIndustryList} );
  public sfcIndustryValue: string[] = [];
  // 申银万国
  public snIndustryList = this.$store.state.user.dictionary.snIndustryList;
  public snIndustryListCascader = getCascaderData( {data: this.snIndustryList} );
  public snIndustryValue: string[] = [];
  public infoStatus: string = '';
  public detail: { csIndustryValue: string[], sfcIndustryValue: string[], snIndustryValue: string[]} = {
    csIndustryValue: [],
    sfcIndustryValue: [],
    snIndustryValue: []
  };
  // refs
  public $refs: {
    logoImg: any
  };
  // 生命周期
  public async mounted() {
    const personId = '2';
    const data = await PersonService.getPersonDetail(personId);
    this.person = data; // <PersonVo> person
  }
  // 根据国标分类 带出 证监会和申银万国的数据
  public csIndustryChange(value: string[]) {
    const lastVal = value[value.length - 1];
    // 带出证监会行业
    const sfcCode = getIndustryById(lastVal, setFullValue(this.csIndustryList), 'sfcCode');
    const sfcFullValue = getIndustryById(sfcCode, setFullValue(this.sfcIndustryList), 'fullValue');
    this.detail.sfcIndustryValue = sfcFullValue ? sfcFullValue.split('-') : [];
    // 带出证监会行业 end
    // 带出申银万国行业
    const snCode = getIndustryById(lastVal, setFullValue(this.csIndustryList), 'snCode');
    const snFullValue = getIndustryById(snCode, setFullValue(this.snIndustryList), 'fullValue');
    this.detail.snIndustryValue = snFullValue ? snFullValue.split('-') : [];
    // 带出申银万国行业 end
  }
  public submit() {
    // console.log(this.$store.state.user.uid, '>>>>>>>>');
    // console.log(this.val);
    // console.log(this.cvIndustryValue, 'cv');
    // console.log(this.detail.csIndustryValue, '国标');
    // console.log(this.detail.sfcIndustryValue, '证监会');
    // console.log(this.detail.snIndustryValue, '申银');
    this.$refs.logoImg.up();
  }
  public onSuccess(imgId: string) {
    this.$message.success('上传成功，返回id为' + imgId);
  }
  public onSuccessMultiple(fileIdList: string[], fileNameList: string[]) {
    this.$message.success('上传成功，返回id为' + fileIdList + '文件名称为' + fileNameList);
  }
  public setState(state: StateMessage) {
    this.infoStatus = state.infoStatus;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
